<script setup>
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '编辑',
  },
});

const emit = defineEmits(['confirm', 'close']);
</script>

<template>
  <div class="modal" v-if="show">
    <!-- 遮罩层 -->
    <div class="overlay" @click="emit('close')"></div>

    <!-- 模态框内容 -->
    <div class="content" :class="{ 'fade-in': show, 'fade-out': !show }">
      <h2>{{ title }}</h2>
      <div class="modal-body">
        <slot></slot> <!-- 插槽，用于填充表单等内容 -->
      </div>
      <div class="buttons">
        <button class="btn-confirm" @click="emit('confirm')">确认</button>
        <button class="btn-cancel" @click="emit('close')">取消</button>
      </div>
    </div>
  </div>
</template>


<style scoped>
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.3s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.content {
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  z-index: 1001;
  text-align: center;
  animation: fadeIn 0.3s ease-in-out forwards;
}

.content.fade-out {
  animation: fadeOut 0.3s ease-in-out forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.content h2 {
  margin-top: 0;
  color: #009fff;
}

.modal-body {
  margin: 20px 0;
}

.buttons {
  display: flex;
  justify-content: center;
  gap: 10px; /* 按钮之间的间距 */
}

/* 确认按钮样式 */
.btn-confirm {
  padding: 8px 16px;
  background-color: #409eff; /* 蓝色背景 */
  color: #fff; /* 白色文字 */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.btn-confirm:hover {
  background-color: #66b1ff; /* 悬停时更浅的蓝色 */
}

/* 取消按钮样式 */
.btn-cancel {
  padding: 8px 16px;
  background-color: #f56c6c; /* 红色背景 */
  color: #fff; /* 白色文字 */
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.btn-cancel:hover {
  background-color: #f78989; /* 悬停时更浅的红色 */
}
</style>